<!-- 组件 -->
<template>
  <div>
    <swipe
      class="my-swipe"
      :style="'height:' + height + ';'"
      :loop="options.loop"
      :autoplayTime="options.autoplayTime"
    >
      <swipe-item
        class="slide"
        v-for="(item, index) in list"
        :key="index"
        @click.native="handleClick(item)"
      >
        <img :src="item" :alt="'image' + index" />
      </swipe-item>
    </swipe>
  </div>
</template>

<script>
import "c-swipe/dist/swipe.css";
import { Swipe, SwipeItem } from "c-swipe";
export default {
  name: "",
  props: {
    height: {
      type: String,
      default: "200"
    },
    options: {
      type: Object,
      default() {
        return {
          autoplayTime: 3000, // 单位 ms，自动切换卡片的时间间隔，值为 0 时不自动切换
          loop: true // 是否循环轮播
        };
      }
    },
    list: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {};
  },
  components: { Swipe, SwipeItem },
  methods: {
    /**
     * 轮播图点击事件
     */
    handleClick(val) {
      // 触发外部事件，将点击的轮播图详情数据返回
      this.$emit("onClick", val);
    }
  }
};
</script>

<style scoped>
.my-swipe {
  overflow: hidden;
  color: #fff;
  font-size: 30px;
  text-align: center;
}

.slide {
  background-color: #fff;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slide img {
  width: 100%;
}
</style>
